<script setup lang="ts">
import { ref, onMounted } from "vue";
import { apiGetList, delModel } from "@/api/model";
import { ElMessageBox } from "element-plus";

import { Search, Plus, Edit, Delete } from "@element-plus/icons-vue";

defineOptions({
  name: "ModelList",
  inheritAttrs: false,
});

const queryForm = ref({
  pageNum: 1,
  pageSize: 10,
});
const from = ref(null);
const listLoading = ref(false);
const list = ref([]);
const total = ref(0);

const modelEditRef = ref(null);

const getList = () => {
  listLoading.value = true;
  apiGetList(queryForm.value)
    .then((res) => {
      listLoading.value = false;
      if (res.code === 200) {
        list.value = res.data.records;
        total.value = res.data.total;
      }
    })
    .catch(() => {
      listLoading.value = false;
    });
};

const handleEdit = (item) => {
  modelEditRef.value.open(item);
};

const handleDelete = (item) => {
  ElMessageBox.confirm("是否删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    delModel(item.id).then((res) => {
      if (res.code === 200) {
        getList();
      }
    });
  });
};

const handleQuery = () => {
  queryForm.value.pageNum = 1;
  getList();
};

const handleCurrentChange = (val: number) => {
  queryForm.value.pageNum = val;
  getList();
};

const handleSizeChange = (val: number) => {
  queryForm.value.pageSize = val;
  getList();
};

onMounted(() => {
  getList();
});
</script>

<template>
  <div class="app-container">
    <div class="search-container">
      <el-form
        ref="form"
        :inline="true"
        label-width="80px"
        :model="queryForm"
        @submit.prevent
      >
        <el-form-item label="关键词">
          <el-input
            v-model.trim="queryForm.keyword"
            placeholder="请输入名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="queryForm.status"
            clearable
            placeholder="是否启用"
          >
            <el-option label="全部" :value="0" />
            <el-option label="已启用" :value="1" />
            <el-option label="未启用" :value="2" />
          </el-select>
        </el-form-item>

        <el-form-item style="margin-right: 0">
          <el-button
            native-type="submit"
            type="primary"
            :icon="Search"
            @click="handleQuery"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <template #header>
        <el-button type="primary" @click="handleEdit(null)" :icon="Plus">
          添加
        </el-button>
      </template>

      <el-row v-loading="listLoading" :gutter="20" style="padding-left: 25px">
        <div
          v-for="(item, index) in list"
          :key="index"
          style="width: 175px; margin-right: 15px"
          :span="3"
        >
          <el-card
            shadow="always"
            :body-style="{ padding: '10px 0px', textAlign: 'center' }"
            :class="item.status == '1' ? 'open' : 'noopen'"
          >
            <el-image
              style="width: 100px; height: 100px; margin: 0 auto"
              :src="item.modelPic"
              fit="contain"
            />

            <div style="padding: 0" class="item.staues == '1'?'':'noopen'">
              <p class="appname">
                {{ item.modelName }}
              </p>
              <div class="flex flex-justify-around mb-5">
                <small>下载量:{{ item.modelUse || 0 }}</small>
                <small>版本号:{{ item.modelVersion || 0 }}</small>
              </div>

              <div class="bottom">
                <div>
                  <el-tag type="success">{{ item.modelCall }}</el-tag>
                </div>
                <div>
                  <el-icon
                    :size="18"
                    color="#409EFF"
                    style="cursor: pointer"
                    @click="handleEdit(item)"
                  >
                    <Edit />
                  </el-icon>

                  <el-icon
                    :size="18"
                    color="#F56C6C"
                    style="margin-left: 12px; cursor: pointer"
                    @click="handleDelete(item)"
                  >
                    <Delete />
                  </el-icon>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-row>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryForm.pageNum"
        v-model:limit="queryForm.pageSize"
        @pagination="handleQuery"
      />
    </el-card>

    <!-- 新增或修改参数配置对话框 -->
    <ShopEdit ref="modelEditRef" @on-result="handleQuery" />
  </div>
</template>
<style lang="scss" scoped>
.appname {
  font-weight: bold;
}

.bottom {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.bottom div {
  display: flex;
  align-items: center;
}

.noopen {
  color: #999;
  background-color: #eee;
  filter: grayscale(100%);
}
</style>
